<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile"
	contentType="text/html"
    renderKitId="PRIMEFACES_MOBILE">

    <pm:page title="TwitFaces">
        
        <style>
            .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb {
                min-height: 59px;
                padding-left: 55px;
            }            
        </style>

        <!-- Main View -->
        <pm:view id="main" swatch="b">
            <pm:header title="TwitFaces"/>

            <pm:content>
                <h:form id="twitForm">
                    <p:inputText value="#{twitterController.username}" label="Account: "/>

                    <p:separator />

                    <p:commandButton value="Get Tweets" icon="refresh" update="tweetList profileHeader"
                                      actionListener="#{twitterController.loadTweets}" />

                    <p:outputPanel id="profileHeader">          
                        <p:outputPanel style="text-align: center" rendered="#{twitterController.tweets != null}">
                            <p:graphicImage value="#{twitterController.tweets[0].user.profileImageURL}" styleClass="ui-corner-all"/><br/>
                            <strong><h:outputText value="#{twitterController.tweets[0].user.name}"/></strong><br/>
                            <h:outputText value="@#{twitterController.tweets[0].user.screenName}"/><br/>                            
                            <h:outputText value="#{twitterController.tweets[0].user.description}"/><br/>
                            <h:outputText value="#{twitterController.tweets[0].user.location}"/>
                            
                            <p:separator />                            
                            
                            <h:panelGrid columns="3" >
                                <h:outputText value="#{twitterController.tweets[0].user.statusesCount}"/>                            
                                <h:outputText value="#{twitterController.tweets[0].user.friendsCount}"/> 
                                <h:outputText value="#{twitterController.tweets[0].user.followersCount}"/>  
                                <h:outputText value="TWEETS"/> 
                                <h:outputText value="FOLLOWING"/> 
                                <h:outputText value="FOLLOWERS"/>                                
                            </h:panelGrid>                                                                                    
                        </p:outputPanel>
                    </p:outputPanel>                  
                    
                    <p:dataList id="tweetList" rows="10" paginator="true" value="#{twitterController.tweets}" var="tweet" style="margin-top:1em;">
                        <f:facet name="header" >Tweets</f:facet>
                        <f:attribute name="paginatorText" value="Load older Tweets" />                                                                        
                            <p:graphicImage value="#{tweet.retweetedStatus.user.profileImageURL}" styleClass="ui-corner-all" style="margin-top: 15px" rendered="#{tweet.retweetedStatus != null}"/>
                            <p:graphicImage value="#{tweet.user.profileImageURL}" styleClass="ui-corner-all" style="margin-top: 15px" rendered="#{tweet.retweetedStatus == null}"/>
                            <h2>
                                <small>
                                <h:outputText value="#{tweet.retweetedStatus.user.name} @#{tweet.retweetedStatus.user.screenName}" rendered="#{tweet.retweetedStatus != null}"/>
                                <h:outputText value="#{tweet.user.name} @#{tweet.user.screenName}" rendered="#{tweet.retweetedStatus == null}"/>
                                </small>
                            </h2>                                                
                            <p style="white-space: normal" ><h:outputText value="#{tweet.text}" escape="false" /></p>        
                            <p class="ui-li-aside">
                                <h:outputText value="#{tweet.createdAt}">
                                    <f:convertDateTime  pattern="dd MMM"/>
                                </h:outputText>
                            </p>                                                
                    </p:dataList>
                </h:form>
            </pm:content>

        </pm:view>

    </pm:page>
    
</f:view>